<template>
  <div class="category">
    <header>
      <h1>品类管理</h1>
      <el-button type="info" @click="$router.push('additems')"
        ><i class="el-icon-circle-plus"></i>添加品类</el-button
      >
    </header>
    <p>当前商品分类ID：0</p>
    <el-table :data="cateList" border style="width: 100%">
      <el-table-column prop="id" label="品类ID"> </el-table-column>
      <el-table-column prop="name" label="品类名称"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >修改名称</el-button
          >
          <el-button type="text" size="small" @click="editing(scope.row)"
            >查看其子品类</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <input type="text" v-model="form.name">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { category,category11 } from "../../http/index";
export default {
  data() {
    return {
      cateList: [],
      form: {
        name: "",
        id: "",
      },
      dialogVisible: false,
      cartId:0,
    };
  },
  methods: {
    //请求接口
    category1() {
      category().then((res) => {
        console.log(res);
        this.cateList = res.data.data;
      });
      
    },
    //修改名称
    handleClick(row) {
      console.log(row);
      this.form.id = row.id;
      this.form.name = row.name;
      console.log(this.form.name);
      this.dialogVisible = true
    },
    //点击确定按钮
    dialogVisible1() {
      //请求品类接口
      category11({categoryId:this.form.id,categoryName:this.form.name}).then((res) => {
        console.log(res);
        this.cateList.name = this.form.name
        this.dialogVisible = false
        this.category1()
      });
      this.$message({
            type: 'success',
            message: '修改成功!'
          });
      
    },
    //查看子类
    editing(row) {
      this.cartId = row.id
      console.log(this.cartId);
    }
  },
  created() {
    this.category1();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.category {
  box-sizing: border-box;
  padding: 0 20px 50px;
}
header {
  display: flex;
  width: 100%;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  h1 {
    font-size: 30px;
  }
}
</style>
